<template>
	<view class="charging_details">
		<view class="order_detail">
			<view class="order_title">
				特来电二江花园
			</view>
			<view class="detail">
				<view class="title">
					<view class="title_item" v-for="item in orderDetail" :key="item.title">{{item.title}}</view>
				</view>
				<view class="main">
					<view class="content" v-for="(item,index) in orderDetail" :key="item.content">
						{{item.content}}
						<view class="updata" v-if="index==orderDetail.length-1">
							<navigator url="">
								<image src="../../static/images/zjc/A-16/icon_updata_address@2x.png" mode=""></image>
							</navigator>
							<text>编辑</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cost">
				<view class="total_cost item">
					<text>充电总费用</text>
					<text style="color: #f16c6c; font-size: 48rpx; font-weight: bold;">8.96元</text>
				</view>
				<view class="discount item">
					<text>优惠金额</text>
					<text>10.00元</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" class="finish_btn" @tap="gotoCharge">
				完成充电
			</button>
			<button type="default" class="print_btn">
				打印小票
			</button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions
	} = createNamespacedHelpers('carCharging')
	export default {
		data() {
			return {
				orderDetail: [{
						title: "订单编号",
						content: "0013398714060373"
					},
					{
						title: "充电桩编号",
						content: "19000041"
					},
					{
						title: "充电电量",
						content: "2.54度"
					},
					{
						title: "开始时间",
						content: "2021-01-30 18:16:43"
					},
					{
						title: "结束时间",
						content: "2021-01-30 18:26:43"
					},
					{
						title: "充电时长",
						content: "00:00:52"
					},
					{
						title: "SOC",
						content: "0013398714060373"
					},
					{
						title: "动作",
						content: "手动停止"
					},
					{
						title: "车牌号",
						content: "川A 6666"
					}
				]
			}
		},
		onLoad(options) {
			let userIds = uni.getStorageSync("id");
			// console.log(options, options.Chargeorder, userIds);
			// console.log({
			// 	code: options.Chargeorder,
			// 	userId: userIds,
			// 	totalDegree: 30,
			// 	remark: 123
			// })
			this.setChargeOrder({
				code: options.Chargeorder,
				userId: userIds,
				totalDegree: 30,
				remark: 123
			});
		},
		methods: {
			...mapActions(["setChargeOrder"]),
			gotoCharge() {
				uni.switchTab({
					url: '/pages/charge/charge'
				})
			}
		}
	}
</script>

<style>
	.order_detail {
		width: 700rpx;
		background-color: #ffffff;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		margin-bottom: 50rpx;
	}

	.order_detail .order_title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.order_detail .detail {
		display: flex;
		border-bottom: 1rpx solid #9f9f9f;
		margin-bottom: 35rpx;
	}

	.detail .title {
		color: #9f9f9f;
	}

	.detail .title .title_item {
		margin-bottom: 40rpx;
	}

	.detail .main {
		box-sizing: border-box;
		padding-left: 75rpx;

	}

	.detail .main .content {
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.detail .main .content .updata {
		display: flex;
	}

	.detail .main image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.detail .main text {
		color: #9f9f9f;
	}

	.cost .item {
		display: flex;
		justify-content: space-between;
		/* margin-bottom: 35rpx; */
	}

	.cost .item text {
		line-height: 70rpx;
	}

	.cost .discount {
		color: #9f9f9f;
	}

	.charging_details .btn {
		display: flex;
		justify-content: space-around;
	}

	.btn button {
		width: 258rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
	}

	.btn .finish_btn {
		background-color: #ed3a1d;
		color: #ffffff;
	}

	.btn .print_btn {
		border: 1rpx solid #ed3a1d;
		background-color: #ffffff;
		color: #ed3a1d;
	}
</style>
